<template>
	<view
		class="history-pages"
		style="width: 750rpx; height: 100vh; position: relative"
	>
		<view
			class="navbar"
			style="height: 44px"
		>
			<u-navbar
				title="历史记录"
				@rightClick="rightClick"
				:autoBack="true"
				:border="true"
			></u-navbar>
		</view>
		<view
			class="history-cards"
			style="width: 750rpx; position: relative"
		>
			<view class="history-list-items">
				<view
					class="history-list"
					v-for="(p, index) in cardList"
					:key="index"
				>
					<CardVue :cardData="cardList[index]"></CardVue>
				</view>
			</view>
		</view>
		<view
			class="noData"
			v-if="isNone"
			style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"
		>
			<span style="font-size: 18px; color: #999">没有数据呐~</span>
		</view>
	</view>
</template>

<script>
import CardVue from '../../components/index/index_card/Card.vue';
import { mapState } from 'vuex';
import { getHistory } from '@/common/api/cardApi.js';
export default {
	data() {
		return {
			cardList: [],
			isNone: true
		};
	},
	components: {
		CardVue
	},
	computed: {
		...mapState({
			userInfo: (state) => state.user.userInfo
		})
	},
	methods: {
		rightClick() {
			console.log('rightClick');
		},
		leftClick() {
			console.log('leftClick');
		},
		init(options) {
			console.log(options);
		}
	},
	onLoad(options) {
		const uid = this.userInfo.uid;
		getHistory(uid).then((res) => {
			// console.log(res);
			if (res.length === 0) {
				this.isNone = true;
			} else {
				this.isNone = false;
				this.cardList = res;
			}
			console.log(res);
		});
	},
	mounted() {}
};
</script>

<style>
.history-pages {
	width: 750rpx;
}
.history-cards {
	width: 90%;
	display: flex;
	/* justify-content: center; */
	align-items: center;
	margin-left: 20rpx;
}
.history-list-items {
	width: 90%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* gap: 2px; */
}
.history-list-warp {
	white-space: nowrap;
	width: 100%;
}
.history-list {
	width: 100%;

	/* display: inline-block; */
}
</style>
